{% extends "UiManager/base.html" %}
{% block title %}套件管理{% endblock %}
{% block new %}
    <button class="btn btn-danger btn-sm fa fa-plus" style="border-radius: 20px" data-toggle="modal" data-target="#newProject">&nbsp;新建套件</button>
{% endblock %}
{% block location %}
    <div class="am-icon-home fa fa-home" style="font-weight: bold;color: grey; float: right;">&nbsp;当前位置： 套件管理 > 套件列表</div>
{% endblock %}
{% load staticfiles %}
{% block css %}
{% endblock %}
{% block js %}
    <script>
    function closeDown() {
        $("#newProject,#edit_suite").modal("hide");
        $("#message").html("");
        $("#delMessage").html("");
        $("#deleteObj").modal("hide");
    }

    //项目case联动查询
    $("#projectSelect").on('change', function () {
        var projectId = $("#projectSelect option:selected").attr("value");//所属项目
        $.ajax({
            url: '/ui/get_case_by_project/',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"projectId": projectId}),
            success: function (res) {
                if (res.status == 0) {
                    $("#belong_case_id").find('option').remove();
                    for (var i = 0; i < res.content.length; i++) {
                        $("#belong_case_id").append('<option value="' + res.content[i]['id'] + '">' + res.content[i]['case_name'] + '</option>');
                    }
                }
            }
        });
    });

    //编辑项目case联动查询
    $("#edit_projectSelect").on('change', function () {
        var projectId = $("#edit_projectSelect option:selected").attr("value");//所属项目
        $.ajax({
            url: '/ui/get_case_by_project/',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"projectId": projectId}),
            success: function (res) {
                if (res.status == 0) {
                    $("#edit_belong_case_id").find('option').remove();
                    for (var i = 0; i < res.content.length; i++) {
                        $("#edit_belong_case_id").append('<option value="' + res.content[i]['id'] + '">' + res.content[i]['case_name'] + '</option>');
                    }
                }
            }
        });
    });

    //选中case 到右边
    $('#add_to_right').on('click', function () {
            var include = $('#belong_case_id').val();
            for (var key in include) {
                var case_id = include[key];
                var case_name = $('#belong_case_id option[value="' + include[key] + '"]').text();
                if (case_name !== '请选择') {
                    var href = "<li id=" + case_id + ">" +
                        "test：" + case_name +
                        "<a class=\"btn\" onclick=remove_self('#" + case_id + "')>✖</a></li>";
                    $("#pre_case").append(href);
                }

            }

        });

    $('#edit_add_to_right').on('click', function () {
            var include = $('#edit_belong_case_id').val();
            for (var key in include) {
                var case_id = include[key];
                var case_name = $('#edit_belong_case_id option[value="' + include[key] + '"]').text();
                if (case_name !== '请选择') {
                    var href = "<li id=" + case_id + ">" +
                        "test：" + case_name +
                        "<a class=\"btn\" onclick=remove_self('#" + case_id + "')>✖</a></li>";
                    $("#edit_pre_case").append(href);
                }

            }

        });

    // 删除选中case
    function remove_self(id) {
            $(id).remove();
    }

    //初始化新建套件弹窗
    function newTestCase() {
        $("#guanlian").modal("hide");
        $("#projectSelect").val("none");
        $("#addTestCaseMessage").html("")
        $("#es").find("option").remove();
        $("#newProject").modal("show");
    }

    // 新建套件
    function create() {
        var suite_name, project, cases, simple_desc;
        suite_name = $("#suite-name").val();
        project = $("#projectSelect option:selected").attr("value");
        simple_desc = $('#suite-description').val();
        cases = [];
        var i = 0;
            $("#pre_case li").each(function () {
                cases.push($(this).attr('id'));
            });
        var data = {
            "type": "add",
            "suite_name": suite_name,
            "project": project,
            "simple_desc": simple_desc,
            "cases": cases,
        }
        var data = JSON.stringify(data);
        $.ajax({
            url: '/ui/add_suite/',
            type: 'post',
            data: data,
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    $("#newProject").modal("hide");
                    location.reload()
                } else {
                    $("#addTestCaseMessage").html(res.message);
                }
            }
        });
    }

    /*编辑页面*/
    function edit(id) {
        $('#edit_suite').modal('show');
        $('#edit_belong_case_id').find("option").remove();
        $('#edit_pre_case').find("li").remove();
        var data = {
            id: id,
            type: 'edit'
        };
        $.ajax({
            url: '/ui/edit_suite/',
            type: 'post',
            data: JSON.stringify(data),
            dataType: 'json',
            success: function (res) {
                $("#edit_suite_name").val(res.suite_name);
                $("#edit_projectSelect").val(res.belong_project.id);
                $("#edit_suite_description").val(res.simple_desc);
                for (var i = 0; i < res.cases.length; i++) {
                    var href = "<li id=" + res.cases[i].id + ">" +
                        "test：" + res.cases[i].case_name +
                        "<a class=\"btn\" onclick=remove_self('#" + res.cases[i].id + "')>✖</a></li>";
                    $("#edit_pre_case").append(href);
                }
                var datas = {
                    "projectId": res.belong_project.id
                };
                var data = JSON.stringify(datas);
                $.ajax({
                    url: '/ui/get_case_by_project/',
                    type: 'post',
                    dataType: 'json',
                    data: data,
                    success: function (res) {
                        if (res.status == 0) {
                            for (var i = 0; i < res.content.length; i++) {
                                $("#edit_belong_case_id").append('<option value="' + res.content[i]['id'] + '">' + res.content[i]['case_name'] + '</option>');
                            }
                        }
                    }
                });
                $("#edit-save").attr("onclick", "editSave(" + id + ")");
            }
        });
    }

    /*编辑保存*/
    function editSave(id) {
        var suite_name, project, cases, simple_desc;
        suite_name = $("#edit_suite_name").val();
        project = $("#edit_projectSelect option:selected").attr("value");
        simple_desc = $('#edit_suite_description').val();
        cases = [];
        var i = 0;
        $("#edit_pre_case li").each(function () {
            cases.push($(this).attr('id'));
        });
        var data = {
            "id": id,
            "type": "edit_save",
            "suite_name": suite_name,
            "project": project,
            "simple_desc": simple_desc,
            "cases": cases,
        }
        var data = JSON.stringify(data);
        $.ajax({
            url: '/ui/edit_suite/',
            type: 'post',
            data: data,
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    $("#edit_suite").modal("hide");
                    location.reload()
                } else {
                    $("#edit_message").html(res.message);
                }
            }
        });
    }

    /*删除询问方法*/
    function isDel(id) {
        $("#delButton").attr("onclick", "del(" + id + ")");
        $("#deleteObj").modal("show");
    }

    /*删除方法*/
    function del(id) {
        var data = {
          "id": id,
          "type": "delete"
        };
        $.ajax({
            url: '/ui/edit_suite/',
            type: 'post',
            contentType: 'application/json',
            dataType: 'json',
            data:JSON.stringify(data),
            success: function (res) {
                if (res.code == 0) {
                    $("#deleteObj").modal("hide");
                    location.reload();
                } else {
                    $("#delMessage").html(res.message);
                }
            }
        });
    }


function run_suite(index) {
    $('#run-suite').modal('show');
    $('#run-suite').on('shown.bs.modal', function () {
        $("#run").on('click', function () {
            var env_id = $("#envSelect option:selected").attr("value");
            var email = $("#email").val()
            $.ajax({
            url: '/ui/run_test/',
            type: 'post',
            data: JSON.stringify({
                "suite_id": index,
                "env_id": env_id,
                "type": "suite",
                "email": email
            }),
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    $('#run-suite').modal('hide');
                    alert('用例执行中，请稍后查看报告即可,默认时间戳命名报告')
                    location.reload()
                } else {
                    $("#addTestCaseMessage1").html(res.message);
                }
            }
        });

    });
})
}

</script>
{% endblock %}
{% block content %}
    <!--套件列表-->
    <div id="page-wrapper">
        <div id="page-inner">
            <!-- /. ROW  -->
            <!-- /. 表格  -->
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <!--<div class="panel-heading">表格名字</div>-->
                        <div class="panel-body" style="min-height:500px">
                            <div class="row mar-bottom-20">
                                <div class="form-inline">
                                    <form id="pro_filter" method="POST" action="/ui/suite_list/">
                                        <div class="col-lg-12">
                                            <div class="input-group">
                                                <select class="form-control selectpicker" data-style="btn-danger" name="select_project_name">
                                                    <option value="0">全部项目</option>
                                                    {% for project in project_list %}
                                                        {% if  project.id == select_project_name %}
                                                            <option value="{{ project.id }}" selected="selected">{{ project.project_name }}</option>
                                                        {% else %}
                                                            <option value="{{ project.id }}">{{ project.project_name }}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="input-group">
                                              <input name="search_suite_name" type="text" class="form-control" placeholder="套件名称" value="{{ search_suite_name }}">
                                                <span class="input-group-btn">
                                                <button class="btn btn-primary" type="submit">搜索</button>
                                              </span>
                                            </div><!-- /input-group -->
                                        </div><!-- /.col-lg-12 -->
                                    </form>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>套件名称</th>
                                        <th>所属项目</th>
                                        <th>创建时间</th>
                                        <th>描述信息</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody class="js_table">
                                        {% for row in obj %}
                                        <tr>
                                            <td>{{ row.id }}</td>
                                            <td>{{ row.suite_name }}</td>
                                            <td>{{ row.belong_project.project_name }}</td>
                                            <td>{{ row.create_time }}</td>
                                            <td>{{ row.simple_desc }}</td>
                                            {% if row.status == 'False' %}
                                                <td>空闲</td>
                                            {% else %}
                                                <td>正在运行</td>
                                            {% endif %}

                                            <td>
                                                <button class="btn-primary"  onclick="run_suite({{ row.id }})">运行</button>
                                                <button class="btn-info"  onclick="edit('{{ row.id }}')">编辑</button>
                                                <button class="btn-danger"  onclick="isDel({{ row.id }})">删除</button>
                                                <a href="/ui/run_log_list">
                                                    <button class="btn-success">运行详情</button>
                                                </a>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <ul class="pagination" id="pager">
                                {#上一页按钮开始#}
                                {# 如果当前页有上一页#}
                                {% if obj.has_previous %}
                                    {#  当前页的上一页按钮正常使用#}
                                    <li class="previous"><a href="/ui/suite_list?page={{ obj.previous_page_number }}">&laquo;</a></li>
                                {% else %}
                                    {# 当前页的不存在上一页时,上一页的按钮不可用#}
                                    <li class="previous disabled"><a href="#">&laquo;</a></li>
                                {% endif %}
                                {#上一页按钮结束#}
                                {# 页码开始#}
                                {% for num in paginator.page_range %}

                                    {% if num == currentPage %}
                                        <li class="item active"><a href="/ui/suite_list?page={{ num }}">{{ num }}</a></li>
                                    {% else %}
                                        <li class="item"><a href="/ui/suite_list?page={{ num }}">{{ num }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {#页码结束#}
                                {# 下一页按钮开始#}
                                {% if obj.has_next %}
                                    <li class="next"><a href="/ui/suite_list?page={{ obj.next_page_number }}">&raquo;</a></li>
                                {% else %}
                                    <li class="next disabled"><a href="#">&raquo;</a></li>
                                {% endif %}
                                {# 下一页按钮结束#}
                            </ul>
                        </div>
                    </div>
                    <!--End Advanced Tables -->
                </div>
            </div>

            <!-- /. 表格  -->
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!--end 套件列表-->

    <!--添加套件-->
    <div class="modal fade" id="newProject" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" onclick="closeDown()">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        新建套件</h4>
                </div>
                <div class="modal-body">
                    <!--内容-->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="suite-name" class="col-md-2 control-label">套件名称</label>
                            <div class="col-md-10">
                                <input id="suite-name" class="form-control" placeholder="输入名称">
                                </input>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="projectSelect" class="col-md-2 control-label">选择项目</label>
                            <div class="col-md-10">
                                <select id="projectSelect" class="form-control">
                                    <option value="none" selected>选择项目</option>
                                    {% for project in project_list %}
                                    <option value="{{ project.id }}">{{ project.project_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-md-2 control-label">测试用例</label>
                            <div class="col-md-4">
                                <select multiple="multiple" size="20" id="belong_case_id" name="include" class="form-control">
                                </select>
                            </div>
                            <div class="col-md-1">
                                <a class="btn" id="add_to_right" style="margin-top: 300%;">>></a>
                            </div>
                            <div class="col-md-5">
                                <ol class="list-btn-mail" id="pre_case"></ol>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-md-2 control-label">描述信息</label>
                            <div class="col-sm-10">
                                <textarea id="suite-description" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label"></label>
                            <div id='addTestCaseMessage' class="col-md-10 js_message text-danger"></div>
                        </div>
                    </form>
                    <!--内容-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeDown()">
                        取消
                    </button>
                    <button type="button" class="btn btn-primary" onclick="create()">
                        确定
                    </button>

                </div>
            </div>
        </div>
    </div>
    <!--end 添加套件-->

    <!--编辑套件-->
    <div class="modal fade" id="edit_suite" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" onclick="closeDown()">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        编辑套件</h4>
                </div>
                <div class="modal-body">
                    <!--内容-->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="suite_name" class="col-md-2 control-label">套件名称</label>
                            <div class="col-md-10">
                                <input id="edit_suite_name" class="form-control" placeholder="输入名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="projectSelect" class="col-md-2 control-label">选择项目</label>
                            <div class="col-md-10">
                                <select id="edit_projectSelect" class="form-control">
                                    <option value="none" selected>选择项目</option>
                                    {% for project in project_list %}
                                    <option value="{{ project.id }}">{{ project.project_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="edit_belong_case_id" class="col-md-2 control-label">测试用例</label>
                            <div class="col-md-4">
                                <select multiple="multiple" size="20" id="edit_belong_case_id" name="include"
                                        class="form-control">
                                </select>
                            </div>
                            <div class="col-md-1">
                                <a class="btn" id="edit_add_to_right" style="margin-top: 300%;">>></a>
                            </div>
                            <div class="col-md-5">
                                <ol class="list-btn-mail" id="edit_pre_case">
                                </ol>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="suite_description" class="col-md-2 control-label">描述信息</label>
                            <div class="col-sm-10">
                                <textarea id="edit_suite_description" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label"></label>
                            <div id='edit_message' class="col-md-10 js_message text-danger"></div>
                        </div>
                    </form>
                    <!--内容-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeDown()">
                        取消
                    </button>
                    <button type="button" class="btn btn-primary" id="edit-save">
                        确定
                    </button>

                </div>
            </div>
        </div>
    </div>
    <!--end 编辑套件-->

    <!--删除询问弹窗提示-->
    <div class="modal fade" id="DelXProject1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">删除测试任务</h4>
                </div>
                <div class="modal-body">
                    <p>请确认是否删除测试任务</p>
                    <p class="js_DELmessage text-danger"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="del">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--end 删除询问弹窗提示-->

    <!--运行设置-->
    <div class="modal fade" id="run-suite" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        运行配置</h4>
                </div>
                <div class="modal-body">
                    <!--内容-->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="envSelect" class="col-sm-2 control-label">选择环境</label>
                            <div class="col-sm-10">
                                <select id="envSelect" class="form-control">
                                    {% for env in env_list %}
                                    <option value="{{ env.id }}">{{ env.env_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">收件人</label>
                            <div class="col-sm-10">
                                <input id="email" class="form-control" placeholder="xx@weshare.com.cn,xx@163.com 半角逗号隔开,为空不发">
                                </input>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div id='addTestCaseMessage1' class="col-sm-10 js_message text-danger"></div>
                        </div>
                    </form>
                    <!--内容-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" id="run">运行</button>
                </div>
            </div>
        </div>
    </div>
    <!--end 运行设置-->

    <!--删除询问弹窗提示-->
    <div class="modal fade" id="deleteObj" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">删除套件</h4>
                </div>
                <div class="modal-body">
                    <p>请确认是否删除套件</p>
                    <p id='delMessage' class="js_DELmessage text-danger"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeDown()">取消</button>
                    <button type="button" class="btn btn-primary" id="delButton">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--end 删除询问弹窗提示-->
{% endblock %}





